<div id="overview">
	MagicGrid is a small and flexible JQuery grid plugin.
	Although it only provide basic grid function, good design model give it great flexibility.
	<p>Basic features:</p>
	<ol>
		<li>adjust row width</li>
		<li>change row order by drag and drop</li>
		<li>load data from local and remote</li>
		<li>row definition by youself (Render)</li>
		<li>succinct code (size of origin code is under 10k, after compress it is under 3k), update easily.</li>
		<li>easy study and use</li>
		<li>easy custom css style</li>
	</ol>
	Just a little more code, you can implement the following functions:
	<ol>
		<li>multiple-row header (at present it provides two-row header)</li>
		<li>order by local or server</li>
		<li>pagination by local and remote</li>
		<li>define the pagination css style by yourself</li>
		<li>row summation</li>
		<li>row extend</li>
		<li>the first row can be locked</li>
	</ol>
</div>
<div id="options">
	<h3><a href="#">sortLocally</a></h3>
	<p>
		Sort data at local or server. default = false.
		<ul>
			<li>true: sort grid data (current page) via js.</li>
			<li>false: just post request params to loadUrl.</li>
		</ul>
	</p>
	<h3><a href="#">headerHeight</a></h3>
	<p>
		Height of grid header set. It is important if you want use multi headers.
		<a href="">demo</a> 
	</p>
	<h3><a href="#">footerHeight</a></h3>
	<p>
		Height of grid footer if you have.
		<a href="<?=$LP?>mac/js/grid/index.php?code=voucher">demo</a> 
	</p>
	<h3><a href="#">cols</a></h3>
	<p>
		A array of columns set.
		<table>
			<tr>
				<th>Items</th>
				<th>Description</th>
				<th>Note</th>		
			</tr>
			<tr>
				<td>field</td>
				<td>property of record data object</td>
				<td>optional</td>
			</tr>
			<tr>
				<td>title</td>
				<td>column title, it also can be a JS or JQuery element</td>
				<td>optional, <a href="">demo</a></td>
			</tr>
			<tr>
				<td>width</td>
				<td>column width</td>
				<td>must be assigned, unit is px</td>
			</tr>
			<tr>
				<td>header</td>
				<td>JS or JQuery element for custom head</td>
				<td>optional, but it is important for multi headers.<a href="">demo</a></td>
			</tr>
			<tr>
				<td>sizeable</td>
				<td>If this column can be resize width</td>
				<td>optional, default = true</td>
			</tr>
			<tr>
				<td>render</td>
				<td>a function that return a JS or JQuery element to show in cells.</td>
				<td>optional.<a href="">demo</a></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>
					1. r: record object<br/>
					2. tr: row element<br/>
					3. gd: grid element<br/>
				</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</p>
	<h3><a href="#">loader</a></h3>
	<p>
		<ul>
			<li>url: URL, data provider</li>
			<li>params: load params, eg: { pageNo: 1, pageSize: 20 }</li>
			<li>autoLoad: whether auto load data when current page ready. default = true</li>
		</ul>
	</p>
	<h3><a href="#">pagerLength</a></h3>
	<p>
		how many page numbers will show in the page bar. optional.
		but, if you do not assign this value, the page bar will be hidden. 
	</p>
</div>
<div id="events">
	<h3><a href="#">afterLoad(dd, [po])</a></h3>
	<p>
		This event will be trigged since data be loaded to grid.
		<ul>
			<li>dd: direct grid data array.<a href="">demo</a></li>
			<li>po: full grid data object with pagenation. <a href="">demo</a></li>
		</ul>
	</p>
</div>
<div id="methods">
	<h3><a href="#">sort([el])</a></h3>
	<p>
		Sort by current sorter elements or assigned sorter element.
		<ul>
			<li>el: sorter element, optional, usually not use</li>
		</ul>
	</p>
	<h3><a href="#">adjust([vp])</a></h3>
	<p>
		Manually fit the grid to the container of it or just fit to itself.
		<ul>
			<li>vp: container(viewPort) of it, optional</li>
		</ul>
	</p>
	<h3><a href="#">newRow(r, [k])</a></h3>
	<p>
		Create a new row but do not append it to grid.<br/>
		Return element(tr) of new row.
		<ul>
			<li>r: data object of this row</li>
			<li>k: manually assigne the key of row. It must be passed when option "key" is not set.</li>
		</ul>
		Here is an <a href="<?=$LP?>mac/js/grid/index.php?code=exp">demo</a>.
	</p>
	<h3><a href="#">addRow(r, [k])</a></h3>
	<p>
		Create and append a new row to grid.<br/>
		Same param with <a href="#methods.newRow">"newRow"</a> method.
	</p>
	<h3><a href="#">loadData(data, [po])</a></h3>
	<p>
		Load data to grid from local memory.
		<ul>
			<li>dd: direct grid data array.<a href="">demo</a></li>
			<li>po: full grid data object with pagenation. this param will be passed to <a href="#events.afterLoad">afterLoad</a> event.<a href="">demo</a></li>
		</ul>
	</p>
	<h3><a href="#">load([pm])</a></h3>
	<p>
		Load data to grid from remote url(option loadUrl).
		<ul>
			<li>pm: params for load. eg: { name: 'tom' }</li>
		</ul>
	</p>
	<h3><a href="#">lockCols(cs)</a></h3>
	<p>
		Freeze first one or seriate more columns from left.
		<ul>
			<li>cs: name array of columns, eg: ['code','name']</li>
		</ul>
	</p>
</div>